<template>
	<view>
		<u-navbar back-text="返回" :back-text-style="{color:color}" :is-back="true" title="新股申购与中签日期" 
		:background="background" :back-icon-color="color" :title-color="color">
			<slot slot="right">
				<!-- <u-icon name="search" :color="color" size="44" style="padding-right: 30rpx;"></u-icon> -->
				
				
			</slot>
		</u-navbar>
			<view class="table-box">
				<z-table :tableData="tableData" 
				:columns="columns" 
				:emptyText="emptyText"
				:showLoading="false"
				:stickSide="true" :tableHeight="tableHeight"></z-table>
			</view>
			
			<u-loadmore :status="status" @loadmore="Loadmore()" :load-text="loadText"/>
		</view>
	</view>
</template>

<script>
	import zTable from "../../components/z-table/z-table.vue";
	const { windowWidth, windowHeight } = uni.getSystemInfoSync();	
	export default {
		components: {
			zTable
		},
		data() {
			//获取上一天
			let now = new Date();
			now = new Date(now.getTime() - 60*60*24*1000)
			return {
				background: {
					backgroundColor: 'rgb(222, 46, 46)',
				},
				color:"#fff",
				list: [{
						name: '全部'
					}, {
						name: '沪A'
					}, {
						name: '深A'
					}],				
				current: 0,
				tableHeight:((windowHeight - 42) * (750 / windowWidth)),
				tableData:[
				],
				emptyText:"没有数据哦！请选择其它时间查看~",
				columns:[{
					'title':'股票名称',
					'key':'name',
					'width':'250',
				},{
					'title':'申购代码',
					'key':'scode',
					'width':'250',
				},{
					'title':'发行总数',
					'key':'issue_total',
					'width':'200',
				},{
					'title':'网上发行',
					'key':'online_issue',
					'width':'200',
				},{
					'title':'发行价格',
					'key':'issue_price',
					'width':'200',
				},{
					'title':'申购日期',
					'key':'date',
					'width':'200',
				},{
					'title':'中签号公布日',
					'key':'winning_lots_publish',
					'width':'200',
				},{
					'title':'中签缴款日期',
					'key':'winning_lots_payment',
					'width':'200',
				},
				],
				status: 'loadmore',
				loadText: {
							loadmore: '点击加载更多',
							loading: '努力加载中',
							nomore: '实在没有了'
						},
				page: 1,
			}
		},
		methods: {
			reload(){
				this.tableData = [];
				this.getTableData(this.current)
			},
			change(index) {
				this.current = index;
				this.tableData = [];
				this.getTableData(index)
			},
			calendarChange(e){
				this.calendar.date = e;
				this.tableData = [];
				this.getTableData(this.current)
			},
			Loadmore(){
				this.status = 'loading';
				this.page++;
				this.getTableData();
			},
			getTableData(){
				this.$Request.get(this.$api.index.getnewshareswinninglots,{
					page:this.page,
				}).then(res => {
					if(res.code == 0){
						let data = res.data;
						for(let index in data){
							data[index].name = "<uni-view class='title'>"+data[index].name+"</uni-view> <uni-view class='code'>"+data[index].code+"</uni-view>"
							
							data[index].scode = "<text>"+data[index].scode+"</text>"
						
							this.tableData.push(data[index])	
						}
					}
					this.status = 'loadmore'
				})
			}
		},
		created() {
			this.getTableData(this.current)
		}
	}
</script>

<style lang="less" scoped>
	//table 样式修改
	/deep/.z-table {
		border: none;
		border-top: 2px solid #fdfdfd;
		.table-empty{
			margin-top: 20rpx;
		}
		.z-table-title {
			height: 90rpx;
			font-weight: bold;
			.z-table-title-item{
				background: #efefef;
				border: none;
				height: 100%;
			}
		}
		.z-table-col-text{
			text-align: center !important;
			font-size: 26rpx;
			uni-view{
				width: 100%;
			}
		}
		.z-table-stick-side{
			border: none;
		}
		.z-table-container-row{
			height: 90rpx;
			.z-table-container-col{
				line-height: unset !important;
				height: 100%;
				.title{
					font-size: 28rpx;
					font-weight: bold;
				}
				.code{
					font-size: 22rpx;
				}
			}
		}
	}
/* 	/deep/ .z-table .z-table-container-row{
		border-bottom: solid 0.5px #de2e2e;
	} */
	.date_show{
		background-color: #efefef;
		height: 70rpx;
		border-bottom: 2px solid #fdfdfd;
		text-align: center;
		line-height: 70rpx;
	}
	.list-title{
		background-color: #efefef;
		border-top: 1px solid #fdfdfd;
		height: 90rpx;
		font-weight: bold;
		.u-col{
			text-align: center !important;	
		}
	}
</style>
